<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <nav id="nav">
        <button id="prev" class="nav-item" data-increment="-1">
            <img src="./img/icon-prev.png" alt="prev" />
        </button>
        <button id="next" class="nav-item" data-increment="1">
            <img src="./img/icon-next.png" alt="next" />
        </button>
    </nav>
    <section class="coidea-3d-carousel">
        <div class="stage">
            <div class="item">
                <div class="bcg" style="background-image: url(./img/01.jpg);"></div>
                <div class="content">
                    <div class="description">
                        <p class="description-target">1483 - 1843</p>
                    </div>
                    <div class="headline">
                        <h2 class="headline-target">Dream big</h2>
                    </div>
                    <div class="discover-more">
                        <a href="#" class="discover-more-target">Discover More</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="bcg" style="background-image: url(./img/04.jpg);"></div>
                <div class="content">
                    <div class="description">
                        <p class="description-target">1723 - 1798</p>
                    </div>
                    <div class="headline">
                        <h2 class="headline-target">Pray bigger</h2>
                    </div>
                    <div class="discover-more">
                        <a href="#" class="discover-more-target">Discover More</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="bcg" style="background-image: url(./img/05.jpg);"></div>
                <div class="content">
                    <div class="description">
                        <p class="description-target">1845 - 1853</p>
                    </div>
                    <div class="headline">
                        <h2 class="headline-target">Keep going</h2>
                    </div>
                    <div class="discover-more">
                        <a href="#" class="discover-more-target">Discover More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</body>
<script src="./lib/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/demo.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="./lib/demo.js"></script>



</html>